<template>
    <div class="todomain">
        <mainInput @transmit="transmit" />
        <mainItem :todo='todo' v-for="todo in filterTodos" :key="todo.id" @deleteTodo="deleteTodo" />
        <mainTabs :filter='filter' :todos='todos' @toggle="toggle" @clearCompletedTodos="clearCompletedTodos" />
    </div>
</template>

<script>
import mainInput from "@/todo/todomaincompoments/mainInput.vue";
import mainItem from "@/todo/todomaincompoments/mainItem.vue";
import mainTabs from "@/todo/todomaincompoments/mainTabs.vue";
export default {
  data() {
    return {
      todos: [],
      filter: "all"
    };
  },
  components: {
    mainInput,
    mainItem,
    mainTabs
  },
  computed: {
    filterTodos() {
      if (this.filter === "all") {
        return this.todos;
      }
      if (this.filter === "active") {
        return this.todos.filter(todo => todo.completed === false);
      }
      if (this.filter === "completed") {
        return this.todos.filter(todo => todo.completed === true);
      }
    }
  },
  methods: {
    transmit(data) {
      this.todos.unshift(data);
    },
    deleteTodo(id) {
      this.todos.splice(this.todos.findIndex(todo => todo.id === id), 1);
    },
    toggle(state) {
      this.filter = state;
    },
    clearCompletedTodos() {
      this.todos = this.todos.filter(todo => todo.completed == false);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/normal.scss";
$mainBg: #ccc;
.todomain {
  @include flexCol;
  background-color: $mainBg;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
}
</style>


